<template>
	<div class="shopping-car">
		<div class="car-content">
			<div class="header">
				购物车
				<van-icon name="apps-o" class="manageBtn" @click="() => (manageOff = !manageOff)" />
			</div>
			<div class="announcement">
				<div class="ann-content">
					<van-notice-bar left-icon="volume-o" class="ann-content">{{ announcement }}</van-notice-bar>
				</div>
			</div>
			<div class="car-body">
				<ul class="wares-lists">
					<li v-for="(list, index) of waresLists" :key="index">
						<van-checkbox v-model="list.checked" v-if="manageOff"></van-checkbox>
						<div class="delete-btn" v-else>
							<van-icon name="delete" @click="_delWares(index)"/>
						</div>
						<div class="list-left" @click="_showPic(index, getImgUrl(list.goods_pic))"><img :src="getImgUrl(list.goods_pic)" class="my-gallery-thumbnails" /></div>
						<div class="list-right">
							<div class="list-title" @click="JumpToDetails(list.goods_id)">
								<h2>
									<span class="van-ellipsis">{{ list.goods_name }}</span>
									<span class="van-ellipsis">{{ list.goods_description }}</span>
								</h2>
							</div>
							<div class="list-format">
								<span v-if="list.goods_format.length == 1">规格:&nbsp;{{ list.goods_format[0].text }}</span>
								<div class="select-menu" v-else @click="switchFormat(index)">
									<span>规格:&nbsp;</span>
									<span>{{ list.goods_format[getFormatIndex(list.format_id, list.goods_format)].text }}</span>
									<van-icon name="arrow-down" />
								</div>
							</div>
							<div class="list-bottom">
								<span class="list-price">￥{{ list.goods_format[getFormatIndex(list.format_id, list.goods_format)].price }}</span>
								<div class="cart-pro-number" :class="list.goods_num < 100 || list.goods_num == '' ? 'show' : 'hide'">
									<div class="quantity"><input :value="list.goods_num" type="number" @focus="beginInput(index)" @input="inInput(index)" @blur="endInput(index)" /></div>
									<div class="cut" @click="_cutNum(list.goods_id)"><van-icon class-prefix="icon" name="jian" /></div>
									<div class="add" @click="_addNum(list.goods_id)"><van-icon class-prefix="icon" name="jia" /></div>
								</div>
							</div>
						</div>
					</li>
				</ul>
				<!-- <div :class="'sowitch-format'+copyFormat.show?'show':'hide'">
					<p class="format-price">289</p>
				</div> -->
			</div>
			<div class="recommend">
				<h6 class="rec-title">· 推荐商品 ·</h6>
				<ul class="rec-lists">
					<li v-for="(list, index) of recommendLists" :key="index">
						<div class="goods-img"><img :src="getImgUrl(list.goods_pic)" /></div>
						<div class="goods-name">
							<h4 class="van-multi-ellipsis--l2">{{ list.goods_name }}</h4>
						</div>
						<div class="format-and-add">
							<span>¥{{ list.goods_format[getFormatIndex(list.format_id, list.goods_format)].price }}</span>
							<van-icon name="shopping-cart-o" @click="_addWares(list)" />
						</div>
					</li>
				</ul>
			</div>
		</div>
		<div class="order-bottom" :class="showOrderBottom ? '' : 'hide'">
			<van-submit-bar class="van-submit-bar" :price="total" button-text="提交订单" @submit="submitOrder">
				<van-checkbox v-model="checked" @click="_selectAll(!checked)">全选</van-checkbox>
			</van-submit-bar>
		</div>
		<zoom-picture ref="zoomPic"></zoom-picture>
	</div>
</template>

<script>
import { getImgUrl } from '../utils/utils.js';
import ZoomPicture from '../components/ZoomPicture.vue';
import { mapState, mapGetters, mapMutations } from 'vuex';
export default {
	name: 'shopping-car',
	data() {
		return {
			manageOff: true,
			showOrderBottom: true,
			checked: false,
			announcement: '由于部分区域/小区限制出入，建议选择无接触配送（订单备注代收点）',
			shopCar: [
				{ weight: '66g(一个)', goods_num: 14, goods_id: 8 },
				{ weight: '454g(1.0磅)', goods_num: 6, goods_id: 9 },
				{ weight: '454g(1.0磅)', goods_num: 2, goods_id: 10 },
				{ weight: '454g(1.0磅)', goods_num: 10, goods_id: 18 }
			],
			copyFormat: {
				show: false,
				index: 0,
				format_id: 7
			}
		};
	},
	beforeMount() {},
	mounted() {
		console.log(this.copyFormat);
		this.$store.dispatch('cart/getRecommendLists');
		this.$store.dispatch('cart/getWaresLists');
	},
	computed: {
		...mapState({
			waresLists: state => state.cart.waresLists,
			recommendLists: state => state.cart.recommendLists
		}),
		...mapGetters('cart', {
			total: 'totalPrice',
			waresPic: 'getWaresPic'
		})
	},
	methods: {
		...mapMutations('cart', ['addNum', 'cutNum','delWares','addWares']),
		_showPic(index, src) {
			this.$refs.zoomPic.init(index, src);
		},
		_cutNum(id) {
			this.cutNum(id);
		},
		_addNum(id) {
			this.addNum(id);
		},
		_delWares(index){
			this.delWares(index);
		},
		_addWares(wares){
			this.addWares(wares);
		},
		_selectAll(status) {
			this.$store.dispatch('cart/selectAll', status);
		},
		JumpToDetails(id) {
			this.$router.push({ path: '/Detail?goodsID=' + id + '', query: { goodsID: id } });
		},
		getFormatIndex(id, arr) {
			let k;
			arr.forEach((v, i) => {
				k = v.format_id == id ? i : 0;
			});
			return k;
		},
		switchFormat(index) {
			this.copyFormat.index = index;
		},
		beginInput(index) {
			let carContent = document.querySelector('.car-content');
			let lists = document.querySelectorAll('.wares-lists li');
			let cH = 1.1 - lists[index].getBoundingClientRect().top / 20;
			carContent.style.transform = `translateY(${cH}rem)`;
			this.waresLists[index].goods_num = '';
			this.showOrderBottom = false;
		},
		inInput(index) {
			this.waresLists[index].goods_num = parseInt(event.target.value) || '';
		},
		endInput(index) {
			let carContent = document.querySelector('.car-content');
			carContent.style.transform = `translateY(0)`;
			event.target.value == '' && (this.waresLists[index].goods_num = 1);
			this.showOrderBottom = true;
		},
		submitOrder() {},
		getImgUrl(src) {
			return getImgUrl(src);
		}
	},
	components: {
		'zoom-picture': ZoomPicture
	}
};
</script>
<style lang="less">
.car-content {
	transition: transform 0.5s ease-out;
}
.shopping-car {
	background: #f0f0f0;
}
.header {
	height: 4.6rem;
	font-size: 1.8rem;
	line-height: 4.6rem;
	text-align: center;
	background: #ffffff;
	& > i {
		position: absolute;
		right: 2.2rem;
		top: 1.4rem;
	}
}
.announcement {
	padding: 1.1rem;
}
.ann-content {
	width: 100%;
	height: 2.5rem;
	padding: 0;
	& > i {
		padding-left: 0.6rem;
	}
}
.car-body {
	padding: 0 1.1rem;
}
.wares-lists {
	& > li {
		background: #ffffff;
		margin-bottom: 2rem;
		padding: 1.5rem;
		position: relative;
		display: flex;
		justify-content: space-between;
		box-shadow: 0 4px 6px 0 rgba(0, 0, 0, 0.06);
		border-radius: 5px;
		.van-checkbox__icon {
			font-size: 1.5rem;
		}
		.delete-btn {
			display: flex;
			align-items: center;
			justify-content: center;
			width: 1.5rem;
			height: 12.65rem;
			&>i{
				font-size: 1.8rem;
				color: #442818;
			}
		}
	}
}
.list-left {
	width: 10.9rem;
	height: 12rem;
	a {
		font-size: 0;
		line-height: 0;
	}
	img {
		height: 100%;
		width: 100%;
	}
}
.list-right {
	width: 18.4rem;
	margin-left: 1.1rem;
	.list-title {
		padding-top: 0.5rem;
		span {
			font-size: 1.3rem;
			color: #442818;
			line-height: 2.2rem;
		}
	}
	.list-format,
	.list-price {
		font-size: 1.2rem;
		color: #969696;
	}
	.list-format {
		padding: 1.1rem 0 1.3rem 0;
		display: inline-block;
		position: relative;
		span {
			line-height: 1rem;
		}
	}
	.select-menu {
		padding: 0.25rem 0.5rem;
		border: 0.05rem solid #bbbbbb;
		& > i {
			vertical-align: text-bottom;
			padding-left: 0.5rem;
		}
	}
	.list-bottom {
		display: flex;
		padding-top: 1.1rem;
		justify-content: space-between;
	}
	.cart-pro-number {
		display: flex;
		width: 6.75rem;
		overflow: hidden;
		justify-content: space-between;
		position: relative;
		.cut,
		.add,
		.quantity input {
			height: 2.25rem;
			line-height: 2.25rem;
			text-align: center;
		}
		.cut,
		.add {
			width: 2.25rem;
			background: #f0f0f0;
			color: #000000;
			transition: 0.3s;
		}
		.quantity {
			width: 100%;
			position: absolute;
			input {
				box-sizing: border-box;
				font-size: 1.2rem;
				background: #f7f7f7;
				color: #000000;
				width: 100%;
			}
		}
		i {
			color: #442818;
			font-size: 1rem;
		}
	}
	// 炫酷的动画
	.hide {
		.cut {
			transform: translateX(-2.25rem);
		}
		.add {
			transform: translateX(2.25rem);
		}
		input {
			border: 0.05rem solid #bbbbbb;
			transition: 0.3s;
		}
	}
	.show {
		.cut {
			transform: translateX(0);
		}
		.add {
			transform: translateX(0);
		}
	}
}
.recommend {
	margin-bottom: 7.5rem;
}
.rec-title {
	font-size: 1.5rem;
	padding: 1.5rem 0 2rem 0;
	text-align: center;
	color: #442818;
}
.rec-lists {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	padding: 0 1.1rem;

	li {
		width: 17.1rem;
		padding-bottom: 1.1rem;
		background: #fff;
		margin-bottom: 1.1rem;
		box-shadow: 0 0.2rem 0.3rem 0 rgba(0, 0, 0, 0.06);
		border-radius: 0.25rem;
		position: relative;
		font-size: 1.2rem;
	}
	.goods-img {
		text-align: center;
		img {
			height: 12.1rem;
			width: 11rem;
		}
	}
	.goods-name {
		line-height: 1.8rem;
		padding: 0 1.3rem;
		color: #442818;
	}
	.format-and-add {
		margin-top: 0.6rem;
		padding: 0 1.3rem;
		display: flex;
		justify-content: space-between;
		& > span {
			color: #969696;
		}
		& > i {
			font-size: 1.8rem;
			color: #442818;
		}
	}
}

.order-bottom {
	position: fixed;
	width: 100%;
	transition: 0.5s;
	bottom: 5rem;
	&.hide {
		bottom: -2rem;
		transition: 0s;
	}
	.van-submit-bar {
		position: relative;
	}
}
</style>
